<template>
  <div>
      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
      <van-swipe-item v-for="item in carList" :key="item.idxId">
        <img :src="item.url" />
      </van-swipe-item>
    </van-swipe>
    <van-tag type="primary" v-for="item in goods.tags" :key="item.goodsId">{{item.tagName}}</van-tag>
      <!-- 简介 -->
      <van-panel title="简介">
        <div class="intro" v-html="goods.goodsIntro"></div>
      </van-panel>
      <!-- 底边购买 -->
      <van-goods-action>
        <van-goods-action-button color="#be99ff" type="warning" text="加入购物车" @click="addToCart(goods.goodsId)"/>
        <van-goods-action-button color="#7232dd" type="danger" text="立即购买"  @click="buyNow(goods)"/>
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //轮播图
      carList: [],
      goods: {}
    }
  },
  created() {
    this.getCarList()
  },
  methods: {
    async getCarList() {
      const id = this.$route.params.goodsId
      const {data: res} = await this.$http.post("/api/goods/getOneGoods", {goodsId: id})
      if (res.code !== 200) {
        this.$toast('商品加载失败')
        return 
      }
      this.goods = res.data
      this.carList = res.data.carousels
    },
    async addToCart(id) {
      const {data: res} = await this.$http.post("/api/cart/addOneGoods", {goodsId: id})
      if (res.code !== 200) {
        this.$toast('添加购物车失败')
        return 
      }
      this.$toast('加入购物车成功')
    },
    buyNow(goods) {
      this.$router.push({name: 'orderInfo',params: {goods: goods}})
    }
  }
}
</script>

<style scope>
.van-goods-action {
    margin-bottom: 50px;
}
.my-swipe {
  height: 200px;
}
img {
  width: 100%;
  height: 100%;
}
.van-tag {
  margin: 10px;
}
.intro {
  margin: 20px;
}
</style>